<template>
	<view class="category">
		<view class="nav">
			<scroll-view class="bg" scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true">
				<view class="nav-item" :class="{'ac':active == index}" v-for="(item,index) in info" :key="index"
					@click="changeNav(index)">
					{{item.cname}}
				</view>
			</scroll-view>
		</view>
		<view class="goodsBox">
			<scroll-view scroll-y="true">
				<view class="goods">
					<view class="goods-item" v-for="(item,index) in sp" :key="index">
						<image :src="item.mainPic" mode="" @click="dj(index)"></image>
						<text>{{item.dtitle}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- {{name}} -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				num:10,
				info: [],
				sp: [],
				name: "",
				active: 0,
				scrollTop: 0,
				height: 0,
			}
		},
		onLoad() {
			let that = this
			uni.request({
				url: "https://openapi.dataoke.com/api/category/get-super-category?version=v1.1.0&appKey=612bcfe884763&sign=2c6efa428c88445fa9040ebe3d433954",
				success(res) {
					// console.log(res)
					that.info = res.data.data
					console.log(that.info)
					// console.log(res.data.data.cname)
					// let that = this
					that.name = that.info[0].cname
					uni.request({
						url: "https://openapiv2.dataoke.com/open-api/goods/list-super-goods",
						data: {
							pageId: 1,
							pageSize: 100,
							keyWords: that.info[0].cname,
							sort: 0,
							type: 0,
							appkey: "622b674f76e31",
						},
						success(res) {
							console.log(res)
							that.sp = res.data.data.list
							that.sp = that.sp.slice(0, 10)
							console.log(res.data.data.list)
						},
					})

				},
			})
		},
		onShow() {
			// 获取导航'.nav-item'的高度，在点击导航触发changeNav时，使其向下滚动
			this.$nextTick(() => {
				let height = uni.createSelectorQuery().select(".nav-item");
				height.boundingClientRect((data) => {
					this.height = data.height;
				}).exec()
			})
		},
		onReachBottom() {
			// 触底函数
			this.num = this.num + 10
			uni.request({ //推荐商品
				url: "https://openapiv2.dataoke.com/open-api/goods/list-super-goods",
				data: {
					pageId: 1,
					pageSize: this.num,
					keyWords: that.info[index].cname,
					sort: 0,
					type: 0,
					appkey: "622b674f76e31",
				},
				success: (res) => {
					this.sp = res.data.data.list
					// this.sp = this.sp.concat(res.data.data.list.slice(this.goodsnum - 8))

					// this.goodsnum = this.goodsnum + 8
					console.log(this.num)
					console.log(res.data.data);

				}
			})
		},
		methods: {
			changeNav(index) {
				this.active = index;
				this.scrollTop = this.height * (index - 2);
				this.name = this.info[index].cname
				// 在这里请求接口 展示右侧商品数据

				let that = this
				uni.request({
					url: "https://openapiv2.dataoke.com/open-api/goods/list-super-goods",
					data: {
						pageId: 1,
						pageSize: 100,
						keyWords: that.info[index].cname,
						sort: 0,
						type: 0,
						appkey: "622b674f76e31",
					},
					success(res) {
						console.log(res)
						that.sp = res.data.data.list
						that.sp = that.sp.slice(0, 10)
						console.log(res.data.data.list)
					},
				})

			},
			dj(index) {
				uni.navigateTo({
					url: './gm?' + "name=" + this.name + "&id=" + this.sp[index].id
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	.category {
		display: flex;
		position: absolute;
		width: 100%;
		height: calc(100% - var(--status-bar-height));

		/* 隐藏滚动条样式 */
		::-webkit-scrollbar {
			width: 0;
			height: 0;
		}

		uni-scroll-view {
			height: 100%;
		}

		.bg {
			background: #F7F8F9;
		}

		.nav {
			width: 200rpx;

			.nav-item {
				width: 200rpx;
				height: 104rpx;
				line-height: 104rpx;
				background: #F7F8F9;
				font-size: 28rpx;
				color: #505660;
				text-align: center;
				position: relative;
			}

			.ac {
				color: #26A69A;
				font-size: 30rpx;
				background: #fff;
			}

			.ac:before {
				content: '';
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				width: 6rpx;
				height: 104rpx;
				background: linear-gradient(180deg, #26A69A 0%, #4DB6AC 100%);
				border-radius: 2rpx;
			}
		}

		.goodsBox {
			width: 550rpx;
			padding-left: 10rpx;

			.goods {
				display: flex;
				flex-wrap: wrap;
				padding: 30rpx 0;
				// background-color: #FCFCFC;
				.goods-item {
					width: 200rpx;
					text-align: center;
					margin-bottom: 56rpx;
					margin-right: 30rpx;
					margin-left: 20rpx;

					uni-image {
						display: block;
						width: 170rpx;
						height: 170rpx;
						margin: 0 auto 32rpx;
						border-radius: 30rpx;
					}

					uni-text {
						font-size: 24rpx;
						color: #505660;
					}
				}
			}
		}
	}
</style>
